<template>
    <div>
      <h1>Send an Email</h1>
      <form @submit.prevent="sendEmail">
        <div>
          <label for="smtpServer">SMTP Server:</label>
          <input type="text" v-model="smtpServer" id="smtpServer" required />
        </div>
        <div>
          <label for="username">Username:</label>
          <input type="text" v-model="username" id="username" required />
        </div>
        <div>
          <label for="password">Password:</label>
          <input type="password" v-model="password" id="password" required />
        </div>
        <div>
          <label for="to">To:</label>
          <input type="email" v-model="to" id="to" required />
        </div>
        <div>
          <label for="subject">Subject:</label>
          <input type="text" v-model="subject" id="subject" required />
        </div>
        <div>
          <label for="body">Body:</label>
          <textarea v-model="body" id="body" required></textarea>
        </div>
        <button type="submit">Send Email</button>
      </form>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        smtpServer: '',
        username: '',
        password: '',
        to: '',
        subject: '',
        body: ''
      };
    },
    methods: {
      async sendEmail() {
        const emailData = {
          smtpServer: this.smtpServer,
          username: this.username,
          password: this.password,
          to: this.to,
          subject: this.subject,
          body: this.body
        };
  
        try {
          const response = await axios.post('http://localhost:3000/send-email', emailData);
          console.log(response.data);
          alert('Email sent successfully!');
        } catch (error) {
          console.error(error);
          alert('Failed to send email.');
        }
      }
    }
  };
  </script>
  
  <style scoped>
  /* 添加一些样式 */
  </style>
  